import React, { useState } from "react";
import PAGPlayer from "./PAGPlayer";
import SimplePAGPlayer from "./PagComponent";

const App: React.FC = () => {
  const [isPlaying, setIsPlaying] = useState(true);
  const [progress, setProgress] = useState(0);

  return (
    // <div style={{ width: "500px", height: "500px", margin: "0 auto" }}>
    //   <h1>PAG动画播放器</h1>

    //   <PAGPlayer
    //     src="../public/眩晕爱心-1685347534933.pag.pag.pag"
    //     autoPlay={isPlaying}
    //     loop={true}
    //     onPlay={() => setIsPlaying(true)}
    //     onEnd={() => setIsPlaying(false)}
    //     onError={(error) => console.error("加载失败:", error)}
    //   />

    //   <div style={{ marginTop: "20px" }}>
    //     <button onClick={() => setIsPlaying(!isPlaying)}>
    //       {isPlaying ? "暂停" : "播放"}
    //     </button>
    //     <input
    //       type="range"
    //       min="0"
    //       max="1"
    //       step="0.01"
    //       value={progress}
    //       onChange={(e) => setProgress(parseFloat(e.target.value))}
    //       style={{ width: "300px", margin: "0 10px" }}
    //     />
    //     <button onClick={() => setProgress(0)}>重置</button>
    //   </div>
    // </div>
    <div style={{ width: "300px", height: "300px", margin: "20px auto" }}>
      <h2>简易PAG播放器</h2>
      <SimplePAGPlayer
        src="../public/香蕉-1685519022236.pag.pag.pag"
        autoPlay
        loop
      />
    </div>
  );
};

export default App;
